<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距垂直距离</title>
		<style>
			/*
			平行元素、继承关系元素并且没有边框、内边距和距离的话他们的外边距就会出现外边距合并
			阻止外边距合并解决办法：①加边框、内容或者内边距；②加overflow:hidden（溢出属性）
			 */
			#par{
				width: 300px;
				height: 300px;
				
				margin-top: 50px;
				background: black;
				
			}
			#chi{
				width: 100px;
				height: 100px;
				
				margin-top: 30px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="par">
			<div id="chi"></div>
		</div>
		
	</body>
</html>